var iS = 1;
//图片轮播效果
class imgSwitch {
    // 构造自调用方法
    constructor() {
        // 获取节点对象
        this.boxObj = this.$('.left-nav-img');
        this.imgBoxObj = this.$('.img-box');
        this.imgListObj = this.$('.img-box li', true);
        this.imgIndexObj = this.$('.img-index-box');
        // 获取每次滚动的步长
        this.moveDistance = this.boxObj.offsetWidth;
        // 新增计时器属性 并赋予空的初始值
        this.timeOne = '';	/* 计时图片滚动间隔 */
        this.timeTwo = '';	/* 计时图片自动轮播 */
        // 调用创建图片索引序号的方法
        this.createImgList();
        // 图片序号初始值
        this.indexNum = 0;
        // 给左右按钮绑定点击事件
        this.$('.spirte-bg-left').addEventListener('click', this.leftSpirte.bind(this));
        this.$('.spirte-bg-right').addEventListener('click', this.rightSpirte.bind(this));
        //设置一个判断 每1秒之间只能点击一次;
        this.flag = true;
        // 设置进入页面时自动播放
        this.autoSwitch();
        // 设置鼠标悬停时停止自动轮播
        // 给box绑定鼠标移入移出事件
        this.boxObj.addEventListener('mouseover', this.stopSwitch.bind(this));
        this.boxObj.addEventListener('mouseout', this.startSwitch.bind(this));
    };
    // 构造获取节点的方法
    $(tag, all = false) {
        return all ? document.querySelectorAll(tag) : document.querySelector(tag)
    };
    // 构造创建图片索引序号的方法
    createImgList() {
        // 获取图片索引的长度
        let imgLength = this.imgListObj.length;
        // 循环创建节点标签
        for (let i = 0; i < imgLength; i++) {
            let a = document.createElement('a');
            a.innerHTML = '○';
            a.classList.add('img-index');
            a.href = 'javascript:';
            i == 0 && (a.innerHTML = '●');
            i == 0 && (a.classList.add('selected'));
            a.setAttribute('index', i);
            this.imgIndexObj.appendChild(a);
            // 调用给所有标签绑定点击事件的方法
            a.addEventListener('click', this.imgListFn.bind(this));
        }
        this.imgIndexObj = this.$('.img-index-box a', true);
        // 调用克隆第一张图片的方法
        this.copyImg();
    };
    // 构造图片索引标签绑定点击事件的方法
    imgListFn(eve) {
        this.indexNum = eve.target.getAttribute('index') - 0;
        // 调用选中序号的方法
        this.selectIndexFn();
        // 计算需要运动的步长
        let distance = this.indexNum * this.moveDistance;
        // 调用元素运动的方法
        this.movement(this.imgBoxObj, { left: -distance });
    }
    // 构造选中序号的方法
    selectIndexFn() {
        this.$('.selected').innerHTML = '○';
        this.$('.selected').classList.remove('selected');
        this.imgIndexObj[this.indexNum].classList.add('selected');
        this.imgIndexObj[this.indexNum].innerHTML = '●';
    }
    // 构造元素运动的方法
    /* 
        运动函数的要点
            1.运动的元素 方向 目标值 回调函数
            2.一次运动可能有多个目标多个目标值 <- 需要使用对象传参 
    */
    movement(tagObj, attrObj, fn) {
        // 清空定时器 <- 防止定时器的叠加
        clearInterval(this.timeOne);
        // 元素到达目标值
        this.timeOne = setInterval(() => {
            // 设置元素运动的状态
            let onOff = true;
            // 遍历所有的运动属性
            for (let attr in attrObj) {
                // 计算步长(speed)值	<- 调用getPos方法获取CSS样式
                let distancePos = parseInt(this.getPos(tagObj, attr));
                let speed = (attrObj[attr] - distancePos) / 20;
                // 对步长(speed)值取整
                speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
                // 设置元素运动后的数值
                tagObj.style[attr] = distancePos + speed + 'px';
            }
            //判断是否所有元素都达到目标值,如果有一个未到达则onOff = false;
            for (let attr in attrObj) {
                if (attrObj[attr] !== parseInt(this.getPos(tagObj, attr))) {
                    onOff = false
                    break;
                }
                this.flag = true;
            }
            if (onOff) {
                clearInterval(this.timeOne);
                // 将函数内部的值传递出去
                fn && fn();
            }
        }, 10);
    };
    // 构造获取元素css样式的方法	<- 可以获取元素的外部样式
    getPos(obj, attr) {
        if (obj.currentStyle) {   // 获取css的样式
            return obj.currentStyle[attr];
        } else {
            return getComputedStyle(obj)[attr];
        }
    }


    /* ====================================================== */
    // 左右按钮点击方法
    // 右侧
    rightSpirte() {
        /* clearTimeout(this.timeThree);
        this.timeThree = setTimeout(() => {
            this.flag = true;
        }, 1000); */
        if (this.flag) {
            // 点击右侧按钮切换到下一张 下标++;
            this.indexNum++;
            let distance = -this.indexNum * this.moveDistance;
            let status = false;
            let that = this; // <- 把当前的this传递给that
            // 判断是否到最后一张
            if (this.indexNum == this.imgListObj.length) {
                // 从最后一张切换到第一张
                this.indexNum = 0;
                status = true;
            }
            this.movement(this.imgBoxObj, { left: distance }, function () {
                // 将位置从克隆的第一张改为真正的第一张
                status && (that.imgBoxObj.style.left = '0px')
            });
            // 调用选择序号的方法
            this.selectIndexFn();
            this.flag = false;
        }
    }
    // 左侧
    leftSpirte() {
        clearTimeout(this.timeThree);
        this.timeThree = setTimeout(() => {
            this.flag = true;
        }, 1000);
        if (this.flag) {
            // 点击左侧按钮切换到上一张 下标--;
            this.indexNum--;
            // 判断是否是第一张 <- indexNum < 0
            if (this.indexNum < 0) {
                // 将位置设置到克隆后的第一张图片处
                this.imgBoxObj.style.left = -this.imgIndexObj.length * this.moveDistance + 'px';
                // 设置下标为最大下标
                this.indexNum = this.imgIndexObj.length - 1;
            }
            let distance = -this.indexNum * this.moveDistance;
            this.movement(this.imgBoxObj, { left: distance });
            this.selectIndexFn();
        }
    }
    /* ====================================================== */
    // 构造鼠标移入停止播放的方法
    stopSwitch() {
        // 停止播放
        clearInterval(this.timeTwo)
    }
    // 构造鼠标移出开始播放的方法
    startSwitch() {
        // 开始播放
        this.autoSwitch();
    }
    // 构造克隆第一张图片的方法
    copyImg() {
        // 克隆第一张图片
        let img = this.imgListObj[0].cloneNode(true);
        // 追加到最后一张后面
        this.imgBoxObj.appendChild(img);
    }
    // 构造自动播放的方法
    autoSwitch() {
        this.timeTwo = setInterval(() => {
            this.rightSpirte();
        }, 3000)
    }
}

new imgSwitch;
